<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<meta http-equiv="Content-Security-Policy" content="img-src 'none'">
<title>about:blank in popup inherits CSPs from the navigation initiator</title>
<body>

<script>
  const message_from = (w) => {
    return new Promise(resolve => {
      window.addEventListener('message', msg => {
        if (msg.source == w)
          resolve(msg.data);
      });
    });
  };

  const testCases = [
    {
      previous_origin: window.origin,
      name: "Popup being navigated to about:blank was same-origin.",
    },
    {
      previous_origin: "http://{{hosts[alt][]}}:{{ports[http][0]}}",
      name: "Popup being navigated to about:blank was cross-origin.",
    },
  ];

  testCases.forEach(testCase => {
    promise_test(async t => {
      // Create a popup and navigate it.
      const popup = window.open("about:blank", testCase.name);
      const loaded = message_from(popup);
      window.open(testCase.previous_origin + "/content-security-policy/inheritance/support/postmessage-opener.html", testCase.name);
      t.add_cleanup(() => popup.close());

      assert_equals(await loaded, "ready");

      // Navigate the popup to "about:blank".
      window.open("about:blank", testCase.name);
      await t.step_wait(
        condition = () => {
          try {
            return popup.location.href == "about:blank";
          } catch {}
          return false;
        },
        description = "Wait for the popup to navigate.",
        timeout=3000,
        interval=50);

      // Now create an img in the popup and check if it is blocked by CSPs.
      const script = popup.document.createElement('script');
      script.innerText = `
        function messageBack(msg) {
          opener.postMessage(msg ,"*");
        }
      `;
      popup.document.head.appendChild(script);
      const div = popup.document.createElement('div');

      const img_url = window.origin + "/content-security-policy/support/fail.png";
      div.innerHTML = `
        <img src="${img_url}"
             onload="messageBack('img loaded');"
             onerror="messageBack('img blocked');"
        >
      `;

      const msg = message_from(popup);
      popup.document.body.appendChild(div);
      assert_equals(await msg, "img blocked");
    }, testCase.name);
  });
</script>
